<template>
  <div id="analysisPage">
    <HeadNav
      type="publish"
      :show="1"
      ref="head"
      @publisherChange="publisherChange()"
    ></HeadNav>
    <div class="wd-1220">
      <div class="clearfix">
        <div class="float-left">
          <SlideNav type="publish" sort="analysis"></SlideNav>
        </div>
        <div class="float-right">
          <div class="main-container" v-if="pagePower">
            <!-- 选择分类，日期 -->
            <a-affix :offset-top="36">
              <div class="model-container">
                <div class="model-bg clearfix" style="padding: 10px 15px">
                  <div class="float-left">
                    <a-cascader
                      :field-names="{
                        label: 'name',
                        value: 'category_id',
                        children: 'child_list',
                      }"
                      :options="categoryList"
                      placeholder="所有类目"
                      change-on-select
                      :allowClear="false"
                      expand-trigger="hover"
                      v-model="chooseCategory"
                      @change="selectCategory"
                    />
                    <a-select
                      v-model="chooseYear"
                      style="width: 120px; margin-left: 5px"
                      @change="yearChange"
                    >
                      <a-select-option
                        :value="item"
                        v-for="(item, index) in yearList"
                        :key="index"
                        >{{ item }}年</a-select-option
                      >
                    </a-select>
                  </div>
                </div>
              </div>
            </a-affix>
            <!-- 分析简报 -->
            <div class="model-container">
              <div class="model-bg">
                <div class="section-title">分析简报</div>
                <div style="padding: 20px 15px">
                  <div class="briefing">
                    <!-- 销售数据 -->
                    <div class="briefing-list">
                      <div class="list-left main">销售数据</div>
                      <div>
                        <span v-if="chooseYear == yearList[0]"
                          >本社<span class="data-tab data-tab-night">{{
                            analysisInfo.sale_info.month
                          }}</span
                          >销售指数<span class="data-tab data-tab-night">{{
                            analysisInfo.sale_info.month_sale_amount?analysisInfo.sale_info.month_sale_amount.toLocaleString():'--'
                          }}</span
                          >，</span
                        >全年累计销售指数<span
                          class="data-tab data-tab-night"
                          >{{
                            analysisInfo.sale_info.year_sale_amount?analysisInfo.sale_info.year_sale_amount.toLocaleString():'--'
                          }}</span
                        >，全年动销品种共计<span
                          class="data-tab data-tab-night"
                          >{{
                            analysisInfo.sale_info.year_onsale_num?analysisInfo.sale_info.year_onsale_num.toLocaleString():'--'
                          }}</span
                        >
                      </div>
                    </div>
                    <!-- 销售结构 -->
                    <div class="briefing-list">
                      <div class="list-left main">销售结构</div>
                      <div>
                        <span v-if="chooseYear == yearList[0]"
                          >本社<span class="data-tab data-tab-night">{{
                            analysisInfo.sale_info.month
                          }}</span
                          >销售结构为<span class="data-tab data-tab-night">{{
                            analysisInfo.sale_struct.month_struct
                          }}</span
                          >，</span
                        >全年销售结构为<span class="data-tab data-tab-night">{{
                          analysisInfo.sale_struct.year_struct
                        }}</span>
                      </div>
                    </div>
                    <!-- 书龄结构 -->
                    <div class="briefing-list">
                      <div class="list-left main">书龄结构</div>
                      <div>
                        本社全年主要销售品种书龄为<span
                          class="data-tab data-tab-night"
                        >
                          <template
                            v-if="analysisInfo.sale_age_key == 'sale_age_1'"
                            >1年以内</template
                          >
                          <template
                            v-if="analysisInfo.sale_age_key == 'sale_age_2'"
                            >1~2年</template
                          >
                          <template
                            v-if="analysisInfo.sale_age_key == 'sale_age_3'"
                            >2~3年</template
                          >
                          <template
                            v-if="analysisInfo.sale_age_key == 'sale_age_4'"
                            >3~5年</template
                          >
                          <template
                            v-if="analysisInfo.sale_age_key == 'sale_age_5'"
                            >5年以上</template
                          >
                        </span>
                      </div>
                    </div>
                    <!-- 定价结构 -->
                    <div class="briefing-list">
                      <div class="list-left main">定价结构</div>
                      <div>
                        本社全年主要销售品种定价区间为<span
                          class="data-tab data-tab-night"
                        >
                          <template
                            v-if="
                              analysisInfo.price.price_key == 'sale_price_1'
                            "
                            >20元以下</template
                          >
                          <template
                            v-if="
                              analysisInfo.price.price_key == 'sale_price_2'
                            "
                            >20~50元</template
                          >
                          <template
                            v-if="
                              analysisInfo.price.price_key == 'sale_price_3'
                            "
                            >50~100元</template
                          >
                          <template
                            v-if="
                              analysisInfo.price.price_key == 'sale_price_4'
                            "
                            >100~200元</template
                          >
                          <template
                            v-if="
                              analysisInfo.price.price_key == 'sale_price_5'
                            "
                            >200元以上</template
                          > </span
                        >，对比行业定价平均值本社品种的定价<span
                          class="data-tab data-tab-night"
                          >{{ analysisInfo.price.price_compare_text }}</span
                        >
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 按销售层级分析 -->
            <div class="model-container">
              <div class="model-bg">
                <div class="section-title">按销售层级分析</div>
                <div style="padding: 10px 15px">
                  <a-row>
                    <a-col :span="12">
                      <div class="title">码洋结构</div>
                      <div class="clearfix" v-if="ringData1.length > 0">
                        <div class="float-left">
                          <div id="ring1" class="chart"></div>
                        </div>
                        <div class="float-left chart-data">
                          <div class="chart-title">
                            <a-row type="flex" justify="start">
                              <a-col :span="8">
                                <div class="text-right">本社平均</div>
                              </a-col>
                              <a-col :span="8"></a-col>
                              <a-col :span="8">
                                <div class="text-right">行业平均</div>
                              </a-col>
                            </a-row>
                          </div>
                          <div
                            class="chart-list"
                            v-for="(item, index) in ringData1"
                            :key="index"
                          >
                            <a-row type="flex" justify="start">
                              <a-col :span="8">
                                <div class="text-right chart-num">
                                  {{ item.value }}%
                                </div>
                              </a-col>
                              <a-col :span="8">
                                <div style="text-align: center">
                                  <span
                                    v-if="
                                      item.value >
                                      industryRingData1[index].value
                                    "
                                    class="red"
                                    ><a-icon type="caret-up"
                                  /></span>
                                  <span
                                      v-else-if="
                                        item.value <
                                        industryRingData1[index].value
                                      "
                                      class="green"
                                      ><a-icon type="caret-down"
                                    /></span>
                                    <span v-else>-</span>
                                </div>
                              </a-col>
                              <a-col :span="8">
                                <div class="text-right chart-num">
                                  {{ industryRingData1[index].value }}%
                                </div>
                              </a-col>
                            </a-row>
                          </div>
                        </div>
                      </div>
                      <div class="no-data" v-else>暂无数据</div>
                    </a-col>
                    <a-col :span="12">
                      <div class="title">近12个月码洋结构波动</div>
                      <div v-if="areaData1.length > 0">
                        <div id="area1" class="areachart"></div>
                      </div>
                      <div class="no-data" v-else>暂无数据</div>
                    </a-col>
                  </a-row>
                  <a-row style="margin-top: 15px">
                    <a-col :span="12">
                      <div class="title">品种数结构</div>
                      <div class="clearfix" v-if="ringData2.length > 0">
                        <div class="float-left">
                          <div id="ring2" class="chart"></div>
                        </div>
                        <div class="float-left chart-data">
                          <div class="chart-title">
                            <a-row type="flex" justify="start">
                              <a-col :span="8">
                                <div class="text-right">本社平均</div>
                              </a-col>
                              <a-col :span="8"></a-col>
                              <a-col :span="8">
                                <div class="text-right">行业平均</div>
                              </a-col>
                            </a-row>
                          </div>
                          <div
                            class="chart-list"
                            v-for="(item, index) in ringData2"
                            :key="index"
                          >
                            <a-row type="flex" justify="start">
                              <a-col :span="8">
                                <div class="text-right chart-num">
                                  {{ item.value }}%
                                </div>
                              </a-col>
                              <a-col :span="8">
                                <div style="text-align: center">
                                  <span
                                    v-if="
                                      item.value >
                                      industryRingData2[index].value
                                    "
                                    class="red"
                                    ><a-icon type="caret-up"
                                  /></span>
                                  <span
                                      v-else-if="
                                        item.value <
                                        industryRingData2[index].value
                                      "
                                      class="green"
                                      ><a-icon type="caret-down"
                                    /></span>
                                    <span v-else>-</span>
                                </div>
                              </a-col>
                              <a-col :span="8">
                                <div class="text-right chart-num">
                                  {{ industryRingData2[index].value }}%
                                </div>
                              </a-col>
                            </a-row>
                          </div>
                        </div>
                      </div>
                      <div class="no-data" v-else>暂无数据</div>
                    </a-col>
                    <a-col :span="12">
                      <div class="title">近12个月品种数结构波动</div>
                      <div v-if="areaData2.length > 0">
                        <div id="area2" class="areachart"></div>
                      </div>
                      <div class="no-data" v-else>暂无数据</div>
                    </a-col>
                  </a-row>
                </div>
              </div>
            </div>
            <!-- 按书龄分析 -->
            <div class="model-container">
              <div class="model-bg">
                <div class="section-title">按书龄分析</div>
                <div style="padding: 10px 15px">
                  <a-row>
                    <a-col :span="12">
                      <div class="title">码洋结构</div>
                      <div class="clearfix" v-if="ringData3.length > 0">
                        <div class="float-left">
                          <div id="ring3" class="chart"></div>
                        </div>
                        <div class="float-left chart-data">
                          <div class="chart-title">
                            <a-row type="flex" justify="start">
                              <a-col :span="8">
                                <div class="text-right">本社平均</div>
                              </a-col>
                              <a-col :span="8"></a-col>
                              <a-col :span="8">
                                <div class="text-right">行业平均</div>
                              </a-col>
                            </a-row>
                          </div>
                          <div
                            class="chart-list"
                            v-for="(item, index) in ringData3"
                            :key="index"
                          >
                            <a-row type="flex" justify="start">
                              <a-col :span="8">
                                <div class="text-right chart-num">
                                  {{ item.value }}%
                                </div>
                              </a-col>
                              <a-col :span="8">
                                <div style="text-align: center">
                                  <span
                                    v-if="
                                      item.value >
                                      industryRingData3[index].value
                                    "
                                    class="red"
                                    ><a-icon type="caret-up"
                                  /></span>
                                  <span
                                      v-else-if="
                                        item.value <
                                        industryRingData3[index].value
                                      "
                                      class="green"
                                      ><a-icon type="caret-down"
                                    /></span>
                                    <span v-else>-</span>
                                </div>
                              </a-col>
                              <a-col :span="8">
                                <div class="text-right chart-num">
                                  {{ industryRingData3[index].value }}%
                                </div>
                              </a-col>
                            </a-row>
                          </div>
                        </div>
                      </div>
                      <div class="no-data" v-else>暂无数据</div>
                    </a-col>
                    <a-col :span="12">
                      <div class="title">近12个月码洋结构波动</div>
                      <div v-if="areaData3.length > 0">
                        <div id="area3" class="areachart"></div>
                      </div>
                      <div class="no-data" v-else>暂无数据</div>
                    </a-col>
                  </a-row>
                  <a-row style="margin-top: 15px">
                    <a-col :span="12">
                      <div class="title">品种数结构</div>
                      <div class="clearfix" v-if="ringData4.length > 0">
                        <div class="float-left">
                          <div id="ring4" class="chart"></div>
                        </div>
                        <div class="float-left chart-data">
                          <div class="chart-title">
                            <a-row type="flex" justify="start">
                              <a-col :span="8">
                                <div class="text-right">本社平均</div>
                              </a-col>
                              <a-col :span="8"></a-col>
                              <a-col :span="8">
                                <div class="text-right">行业平均</div>
                              </a-col>
                            </a-row>
                          </div>
                          <div
                            class="chart-list"
                            v-for="(item, index) in ringData4"
                            :key="index"
                          >
                            <a-row type="flex" justify="start">
                              <a-col :span="8">
                                <div class="text-right chart-num">
                                  {{ item.value }}%
                                </div>
                              </a-col>
                              <a-col :span="8">
                                <div style="text-align: center">
                                  <span
                                    v-if="
                                      item.value >
                                      industryRingData4[index].value
                                    "
                                    class="red"
                                    ><a-icon type="caret-up"
                                  /></span>
                                  <span
                                      v-else-if="
                                        item.value <
                                        industryRingData4[index].value
                                      "
                                      class="green"
                                      ><a-icon type="caret-down"
                                    /></span>
                                    <span v-else>-</span>
                                </div>
                              </a-col>
                              <a-col :span="8">
                                <div class="text-right chart-num">
                                  {{ industryRingData4[index].value }}%
                                </div>
                              </a-col>
                            </a-row>
                          </div>
                        </div>
                      </div>
                      <div class="no-data" v-else>暂无数据</div>
                    </a-col>
                    <a-col :span="12">
                      <div class="title">近12个月品种数结构波动</div>
                      <div v-if="areaData4.length > 0">
                        <div id="area4" class="areachart"></div>
                      </div>
                      <div class="no-data" v-else>暂无数据</div>
                    </a-col>
                  </a-row>
                </div>
              </div>
            </div>
            <!-- 按定价区间分析 -->
            <div class="model-container">
              <div class="model-bg">
                <div class="section-title">按定价区间分析</div>
                <div style="padding: 10px 15px">
                  <div class="clearfix">
                    <div
                      class="float-left"
                      style="width: 130px; text-align: center"
                    >
                      <span style="font-size: 12px">本社平均定价</span>
                    </div>
                    <div
                      class="float-left"
                      style="width: 30px; height: 1px; text-align: center"
                    ></div>
                    <div
                      class="float-left"
                      style="width: 130px; text-align: center"
                    >
                      <span style="font-size: 12px">行业平均定价</span>
                    </div>
                  </div>
                  <div class="clearfix" style="margin-bottom: 30px">
                    <div
                      class="float-left"
                      style="width: 130px; text-align: center"
                    >
                      <span class="main-font price">￥{{ publishAvg }}</span>
                    </div>
                    <div
                      class="float-left"
                      style="width: 30px; text-align: center; line-height: 36px"
                    >
                      <span class="green" v-if="publishAvg < industryAvg"
                        ><a-icon type="caret-down"
                      /></span>
                      <span class="red" v-else-if="publishAvg > industryAvg"
                        ><a-icon type="caret-up"
                      /></span>
                      <span v-else>-</span>
                    </div>
                    <div
                      class="float-left"
                      style="width: 130px; text-align: center"
                    >
                      <span class="price">￥{{ industryAvg }}</span>
                    </div>
                  </div>
                  <a-row>
                    <a-col :span="12">
                      <div class="title">码洋结构</div>
                      <div class="clearfix" v-if="ringData5.length > 0">
                        <div class="float-left">
                          <div id="ring5" class="chart"></div>
                        </div>
                        <div class="float-left chart-data">
                          <div class="chart-title">
                            <a-row type="flex" justify="start">
                              <a-col :span="8">
                                <div class="text-right">本社平均</div>
                              </a-col>
                              <a-col :span="8"></a-col>
                              <a-col :span="8">
                                <div class="text-right">行业平均</div>
                              </a-col>
                            </a-row>
                          </div>
                          <div
                            class="chart-list"
                            v-for="(item, index) in ringData5"
                            :key="index"
                          >
                            <a-row type="flex" justify="start">
                              <a-col :span="8">
                                <div class="text-right chart-num">
                                  {{ item.value }}%
                                </div>
                              </a-col>
                              <a-col :span="8">
                                <div style="text-align: center">
                                  <span
                                    v-if="
                                      item.value >
                                      industryRingData5[index].value
                                    "
                                    class="red"
                                    ><a-icon type="caret-up"
                                  /></span>
                                  <span
                                      v-else-if="
                                        item.value <
                                        industryRingData5[index].value
                                      "
                                      class="green"
                                      ><a-icon type="caret-down"
                                    /></span>
                                    <span v-else>-</span>
                                </div>
                              </a-col>
                              <a-col :span="8">
                                <div class="text-right chart-num">
                                  {{ industryRingData5[index].value }}%
                                </div>
                              </a-col>
                            </a-row>
                          </div>
                        </div>
                      </div>
                      <div class="no-data" v-else>暂无数据</div>
                    </a-col>
                    <a-col :span="12">
                      <div class="title">近12个月码洋结构波动</div>
                      <div v-if="areaData5.length > 0">
                        <div id="area5" class="areachart"></div>
                      </div>
                      <div class="no-data" v-else>暂无数据</div>
                    </a-col>
                  </a-row>
                  <a-row style="margin-top: 15px">
                    <a-col :span="12">
                      <div class="title">品种数结构</div>
                      <div class="clearfix" v-if="ringData6.length > 0">
                        <div class="float-left">
                          <div id="ring6" class="chart"></div>
                        </div>
                        <div class="float-left chart-data">
                          <div class="chart-title">
                            <a-row type="flex" justify="start">
                              <a-col :span="8">
                                <div class="text-right">本社平均</div>
                              </a-col>
                              <a-col :span="8"></a-col>
                              <a-col :span="8">
                                <div class="text-right">行业平均</div>
                              </a-col>
                            </a-row>
                          </div>
                          <div
                            class="chart-list"
                            v-for="(item, index) in ringData6"
                            :key="index"
                          >
                            <a-row type="flex" justify="start">
                              <a-col :span="8">
                                <div class="text-right chart-num">
                                  {{ item.value }}%
                                </div>
                              </a-col>
                              <a-col :span="8">
                                <div style="text-align: center">
                                  <span
                                    v-if="
                                      item.value >
                                      industryRingData6[index].value
                                    "
                                    class="red"
                                    ><a-icon type="caret-up"
                                  /></span>
                                  <span
                                      v-else-if="
                                        item.value <
                                        industryRingData6[index].value
                                      "
                                      class="green"
                                      ><a-icon type="caret-down"
                                    /></span>
                                    <span v-else>-</span>
                                </div>
                              </a-col>
                              <a-col :span="8">
                                <div class="text-right chart-num">
                                  {{ industryRingData6[index].value }}%
                                </div>
                              </a-col>
                            </a-row>
                          </div>
                        </div>
                      </div>
                      <div class="no-data" v-else>暂无数据</div>
                    </a-col>
                    <a-col :span="12">
                      <div class="title">近12个月品种数结构波动</div>
                      <div v-if="areaData6.length > 0">
                        <div id="area6" class="areachart"></div>
                      </div>
                      <div class="no-data" v-else>暂无数据</div>
                    </a-col>
                  </a-row>
                </div>
              </div>
            </div>
          </div>
          <div class="main-container" v-else>
            <div class="model-container">
              <div
                class="model-bg"
                style="
                  min-height: 660px;
                  padding-bottom: 75px;
                  position: relative;
                "
              >
                <PageNoPower></PageNoPower>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Loading ref="load" :show="1" :isLoading="isLoading"></Loading>
  </div>
</template>
<style lang="scss" scoped>
#analysisPage {
  & .data-block {
    display: inline-block;
    background-color: $themeColor5;
    padding: 15px 10px;
    width: 170px;
    margin-right: 20px;
  }
  & .main-font {
    color: $fontColor1;
  }
  & .price {
    font-size: $fontSize + 10;
  }
  & .red {
    color: $red;
  }
  & .green {
    color: $green;
  }
  & .title {
    font-size: $fontSize - 2;
    // margin-left: 20px;
    margin-bottom: 10px;
  }
  & .chart {
    width: 280px;
  }
  & .areachart {
    width: 520px;
  }
  & .chart-data {
    width: 160px;
    margin-left: 10px;
  }
  & .chart-title {
    font-size: $fontSize - 2;
    margin-bottom: 10px;
  }
  & .text-right {
    text-align: right;
  }
  & .chart-list {
    // @include displayFlex(flex, space-around, center);
    font-size: $fontSize - 2;
    color: $fontColor1;
    margin-top: 3px;
    & .chart-num {
      font-weight: bold;
    }
  }
  & .no-data {
    text-align: center;
    line-height: 160px;
    font-size: $fontSize - 2;
    color: $fontColor2;
  }
}
</style>
<script>
import { COMMON_PUBLISHERCATEGORY } from "../../apis/common.js";
import {
  MYSALES_INFO,
  MYSALES_SALEVELCHART,
  MYSALES_SALEAGECHART,
  MYSALES_SALEPRICECHART
} from "../../apis/publish.js";
import { Chart, registerShape } from "@antv/g2";
export default {
  data() {
    return {
      pagePower: true,
      categoryList: [],
      chooseCategory: [0],
      analysisInfo: {
        sale_info: {
          // 销售结构
          year_sale_amount: 0,
          year_onsale_num: 0,
          month: "",
          month_sale_amount: 0,
        },
        sale_age_key: "", // 书龄结构
        price: {
          // 定价结构
          price_key: "",
        },
        sale_struct: {
          // 销售结构
          year_struct: "",
          month_struct: "",
        },
      },
      isLoading: true,
      ringData1: [],
      ringChange1: null,
      industryRingData1: [],
      areaData1: [],
      areaChange1: null,
      ringData2: [],
      ringChange2: null,
      industryRingData2: [],
      areaData2: [],
      areaChange2: null,
      // 年龄
      ringData3: [],
      ringChange3: null,
      industryRingData3: [],
      areaData3: [],
      areaChange3: null,
      ringData4: [],
      ringChange4: null,
      industryRingData4: [],
      areaData4: [],
      areaChange4: null,
      // 定价
      ringData5: [],
      ringChange5: null,
      industryRingData5: [],
      areaData5: [],
      areaChange5: null,
      ringData6: [],
      ringChange6: null,
      industryRingData6: [],
      areaData6: [],
      areaChange6: null,
      yearList: [],
      chooseYear: "",
      publishAvg: 0,
      industryAvg: 0,
    };
  },
  mounted() {
    let _year = Number(this.$moment().format("YYYY"));
    let _length = _year - 2020 + 1;
    this.yearList = [];
    for (let i = 0; i < _length; i++) {
      this.yearList.push(_year - i);
    }
    this.chooseYear = this.yearList[0];
    this.getFirstCategory();
    this.getData();
    this.getSalelevelData();
    this.getSaleageData();
    this.getSalepriceData();
  },
  methods: {
    // 分析简报
    async getData() {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        supplier_id: this.$refs.head.publishInfo.supplier_id,
        period: this.chooseYear,
        date_type: 4,
        cate_id: this.chooseCategory[this.chooseCategory.length - 1],
        timestamp: tStamp,
      };
      if (this.chooseCategory[0] !== 0) {
        data.cate_level = this.chooseCategory.length == 1 ? "one" : "two";
      }
      data.sign = this.$getSign(data);
      let res = await MYSALES_INFO(data);
      if (res.code == 0) {
        this.pagePower = true;
        this.analysisInfo = res.data;
        this.$nextTick(() => {
          this.isLoading = false;
        });
      } else {
        this.isLoading = false;
        if (res.code == 1009) {
          this.pagePower = false;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    // 销售层级
    async getSalelevelData() {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        supplier_id: this.$refs.head.publishInfo.supplier_id,
        period: this.chooseYear,
        date_type: 4,
        cate_id: this.chooseCategory[this.chooseCategory.length - 1],
        timestamp: tStamp,
      };
      if (this.chooseCategory[0] !== 0) {
        data.cate_level = this.chooseCategory.length == 1 ? "one" : "two";
      }
      data.sign = this.$getSign(data);
      let res = await MYSALES_SALEVELCHART(data);
      if (res.code == 0) {
        // 平均月销码洋
        this.ringData1 = [];
        for (let i in res.data.sale_level_ma) {
          let _obj = {
            value: res.data.sale_level_ma[i],
          };
          if (i == "level_1") {
            _obj.name = "1000册以上";
          } else if (i == "level_2") {
            _obj.name = "500~1000册";
          } else if (i == "level_3") {
            _obj.name = "100~500册";
          } else if (i == "level_4") {
            _obj.name = "10~100册";
          } else if (i == "level_5") {
            _obj.name = "10册以下";
          }
          this.ringData1.push(_obj);
        }
        this.industryRingData1 = [];
        // 行业码洋
        for (let i in res.data.sale_level_industry_ma) {
          let _obj = {
            value: res.data.sale_level_industry_ma[i],
          };
          if (i == "level_1") {
            _obj.name = "1000册以上";
          } else if (i == "level_2") {
            _obj.name = "500~1000册";
          } else if (i == "level_3") {
            _obj.name = "100~500册";
          } else if (i == "level_4") {
            _obj.name = "10~100册";
          } else if (i == "level_5") {
            _obj.name = "10册以下";
          }
          this.industryRingData1.push(_obj);
        }
        // 码洋结构波动
        this.areaData1 = [];
        let _arr1 = [],
          _arr2 = [],
          _arr3 = [],
          _arr4 = [],
          _arr5 = [];
        res.data.sale_level_ma_chart.map((value, key) => {
          for (let i in value.data) {
            let _obj = {
              value: value.data[i],
              year: value.date.toString() + "月",
            };
            if (i == "level_1") {
              _obj.name = "1000册以上";
              _arr1.push(_obj);
            } else if (i == "level_2") {
              _obj.name = "500~1000册";
              _arr2.push(_obj);
            } else if (i == "level_3") {
              _obj.name = "100~500册";
              _arr3.push(_obj);
            } else if (i == "level_4") {
              _obj.name = "10~100册";
              _arr4.push(_obj);
            } else if (i == "level_5") {
              _obj.name = "10册以下";
              _arr5.push(_obj);
            }
          }
        });
        this.areaData1 = [..._arr1, ..._arr2, ..._arr3, ..._arr4, ..._arr5];
        // 平均月销品种数
        this.ringData2 = [];
        for (let i in res.data.sale_level_count) {
          let _obj = {
            value: res.data.sale_level_count[i],
          };
          if (i == "level_1") {
            _obj.name = "1000册以上";
          } else if (i == "level_2") {
            _obj.name = "500~1000册";
          } else if (i == "level_3") {
            _obj.name = "100~500册";
          } else if (i == "level_4") {
            _obj.name = "10~100册";
          } else if (i == "level_5") {
            _obj.name = "10册以下";
          }
          this.ringData2.push(_obj);
        }
        this.industryRingData2 = [];
        // 行业品种数
        for (let i in res.data.sale_level_industry_count) {
          let _obj = {
            value: res.data.sale_level_industry_count[i],
          };
          if (i == "level_1") {
            _obj.name = "1000册以上";
          } else if (i == "level_2") {
            _obj.name = "500~1000册";
          } else if (i == "level_3") {
            _obj.name = "100~500册";
          } else if (i == "level_4") {
            _obj.name = "10~100册";
          } else if (i == "level_5") {
            _obj.name = "10册以下";
          }
          this.industryRingData2.push(_obj);
        }
        // 品种数结构波动
        this.areaData2 = [];
        let _garr1 = [],
          _garr2 = [],
          _garr3 = [],
          _garr4 = [],
          _garr5 = [];
        res.data.sale_level_count_chart.map((value, key) => {
          for (let i in value.data) {
            let _obj = {
              value: value.data[i],
              year: value.date.toString() + "月",
            };
            if (i == "level_1") {
              _obj.name = "1000册以上";
              _garr1.push(_obj);
            } else if (i == "level_2") {
              _obj.name = "500~1000册";
              _garr2.push(_obj);
            } else if (i == "level_3") {
              _obj.name = "100~500册";
              _garr3.push(_obj);
            } else if (i == "level_4") {
              _obj.name = "10~100册";
              _garr4.push(_obj);
            } else if (i == "level_5") {
              _obj.name = "10册以下";
              _garr5.push(_obj);
            }
          }
        });
        this.areaData2 = [
          ..._garr1,
          ..._garr2,
          ..._garr3,
          ..._garr4,
          ..._garr5,
        ];
        // console.log(this.areaData2);
        this.$nextTick(() => {
          if(this.ringChange1){
            this.ringChange1.destroy();
            this.initRing(1);
          }else{
            this.initRing(1);
          }
          if(this.ringChange2){
            this.ringChange2.destroy();
            this.initRing(2);
          }else{
            this.initRing(2);
          }
          if(this.areaChange1){
            this.areaChange1.destroy();
            this.initArea(1);
          }else{
            this.initArea(1);
          }
          if(this.areaChange2){
            this.areaChange2.destroy();
            this.initArea(2);
          }else{
            this.initArea(2);
          }
          this.isLoading = false;
        });
      } else {
        if (res.code == 1009) {
          this.pagePower = false;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    // 年龄
    async getSaleageData() {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        supplier_id: this.$refs.head.publishInfo.supplier_id,
        period: this.chooseYear,
        date_type: 4,
        cate_id: this.chooseCategory[this.chooseCategory.length - 1],
        timestamp: tStamp,
      };
      if (this.chooseCategory[0] !== 0) {
        data.cate_level = this.chooseCategory.length == 1 ? "one" : "two";
      }
      data.sign = this.$getSign(data);
      let res = await MYSALES_SALEAGECHART(data);
      if (res.code == 0) {
        // 平均月销码洋
        this.ringData3 = [];
        for (let i in res.data.sale_age_ma) {
          let _obj = {
            value: res.data.sale_age_ma[i],
          };
          if (i == "sale_age_1") {
            _obj.name = "1年以内";
          } else if (i == "sale_age_2") {
            _obj.name = "1~2年";
          } else if (i == "sale_age_3") {
            _obj.name = "2~3年";
          } else if (i == "sale_age_4") {
            _obj.name = "3~5年";
          } else if (i == "sale_age_5") {
            _obj.name = "5年以上";
          }
          this.ringData3.push(_obj);
        }
        this.industryRingData3 = [];
        // 行业码洋
        for (let i in res.data.sale_age_industry_ma) {
          let _obj = {
            value: res.data.sale_age_industry_ma[i],
          };
          if (i == "sale_age_1") {
            _obj.name = "1年以内";
          } else if (i == "sale_age_2") {
            _obj.name = "1~2年";
          } else if (i == "sale_age_3") {
            _obj.name = "2~3年";
          } else if (i == "sale_age_4") {
            _obj.name = "3~5年";
          } else if (i == "sale_age_5") {
            _obj.name = "5年以上";
          }
          this.industryRingData3.push(_obj);
        }
        // 码洋结构波动
        this.areaData3 = [];
        let _arr1 = [],
          _arr2 = [],
          _arr3 = [],
          _arr4 = [],
          _arr5 = [];
        res.data.sale_age_ma_chart.map((value, key) => {
          for (let i in value.data) {
            let _obj = {
              value: value.data[i],
              year: value.date.toString() + "月",
            };
            if (i == "sale_age_1") {
              _obj.name = "1年以内";
              _arr1.push(_obj);
            } else if (i == "sale_age_2") {
              _obj.name = "1~2年";
              _arr2.push(_obj);
            } else if (i == "sale_age_3") {
              _obj.name = "2~3年";
              _arr3.push(_obj);
            } else if (i == "sale_age_4") {
              _obj.name = "3~5年";
              _arr4.push(_obj);
            } else if (i == "sale_age_5") {
              _obj.name = "5年以上";
              _arr5.push(_obj);
            }
          }
        });
        this.areaData3 = [..._arr1, ..._arr2, ..._arr3, ..._arr4, ..._arr5];
        // 平均月销品种数
        this.ringData4 = [];
        for (let i in res.data.sale_age_count) {
          let _obj = {
            value: res.data.sale_age_count[i],
          };
          if (i == "sale_age_1") {
            _obj.name = "1年以内";
          } else if (i == "sale_age_2") {
            _obj.name = "1~2年";
          } else if (i == "sale_age_3") {
            _obj.name = "2~3年";
          } else if (i == "sale_age_4") {
            _obj.name = "3~5年";
          } else if (i == "sale_age_5") {
            _obj.name = "5年以上";
          }
          this.ringData4.push(_obj);
        }
        this.industryRingData4 = [];
        // 行业品种数
        for (let i in res.data.sale_age_industry_count) {
          let _obj = {
            value: res.data.sale_age_industry_count[i],
          };
          if (i == "sale_age_1") {
            _obj.name = "1年以内";
          } else if (i == "sale_age_2") {
            _obj.name = "1~2年";
          } else if (i == "sale_age_3") {
            _obj.name = "2~3年";
          } else if (i == "sale_age_4") {
            _obj.name = "3~5年";
          } else if (i == "sale_age_5") {
            _obj.name = "5年以上";
          }
          this.industryRingData4.push(_obj);
        }
        // 品种数结构波动
        this.areaData4 = [];
        let _garr1 = [],
          _garr2 = [],
          _garr3 = [],
          _garr4 = [],
          _garr5 = [];
        res.data.sale_age_count_chart.map((value, key) => {
          for (let i in value.data) {
            let _obj = {
              value: value.data[i],
              year: value.date.toString() + "月",
            };
            if (i == "sale_age_1") {
              _obj.name = "1年以内";
              _garr1.push(_obj);
            } else if (i == "sale_age_2") {
              _obj.name = "1~2年";
              _garr2.push(_obj);
            } else if (i == "sale_age_3") {
              _obj.name = "2~3年";
              _garr3.push(_obj);
            } else if (i == "sale_age_4") {
              _obj.name = "3~5年";
              _garr4.push(_obj);
            } else if (i == "sale_age_5") {
              _obj.name = "5年以上";
              _garr5.push(_obj);
            }
          }
        });
        this.areaData4 = [
          ..._garr1,
          ..._garr2,
          ..._garr3,
          ..._garr4,
          ..._garr5,
        ];
        this.$nextTick(() => {
          if(this.ringChange3){
            this.ringChange3.destroy();
            this.initRing(3);
          }else{
            this.initRing(3);
          }
          if(this.ringChange4){
            this.ringChange4.destroy();
            this.initRing(4);
          }else{
            this.initRing(4);
          }
          if(this.areaChange3){
            this.areaChange3.destroy();
            this.initArea(3);
          }else{
            this.initArea(3);
          }
          if(this.areaChange4){
            this.areaChange4.destroy();
            this.initArea(4);
          }else{
            this.initArea(4);
          }
          this.isLoading = false;
        });
      } else {
        if (res.code == 1009) {
          this.pagePower = false;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    // 定价
    async getSalepriceData() {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        supplier_id: this.$refs.head.publishInfo.supplier_id,
        period: this.chooseYear,
        date_type: 4,
        cate_id: this.chooseCategory[this.chooseCategory.length - 1],
        timestamp: tStamp,
      };
      if (this.chooseCategory[0] !== 0) {
        data.cate_level = this.chooseCategory.length == 1 ? "one" : "two";
      }
      data.sign = this.$getSign(data);
      let res = await MYSALES_SALEPRICECHART(data);
      if (res.code == 0) {
        this.publishAvg = res.data.supplier_avg_price;
        this.industryAvg = res.data.industry_avg_price;
        // 平均月销码洋
        this.ringData5 = [];
        for (let i in res.data.sale_price_ma) {
          let _obj = {
            value: res.data.sale_price_ma[i],
          };
          if (i == "sale_price_1") {
            _obj.name = "20元以下";
          } else if (i == "sale_price_2") {
            _obj.name = "20~50元";
          } else if (i == "sale_price_3") {
            _obj.name = "50~100元";
          } else if (i == "sale_price_4") {
            _obj.name = "100~200元";
          } else if (i == "sale_price_5") {
            _obj.name = "200元以上";
          }
          this.ringData5.push(_obj);
        }
        this.industryRingData5 = [];
        // 行业码洋
        for (let i in res.data.sale_price_industry_ma) {
          let _obj = {
            value: res.data.sale_price_industry_ma[i],
          };
          if (i == "sale_price_1") {
            _obj.name = "20元以下";
          } else if (i == "sale_price_2") {
            _obj.name = "20~50元";
          } else if (i == "sale_price_3") {
            _obj.name = "50~100元";
          } else if (i == "sale_price_4") {
            _obj.name = "100~200元";
          } else if (i == "sale_price_5") {
            _obj.name = "200元以上";
          }
          this.industryRingData5.push(_obj);
        }
        // 码洋结构波动
        this.areaData5 = [];
        let _arr1 = [],
          _arr2 = [],
          _arr3 = [],
          _arr4 = [],
          _arr5 = [];
        res.data.sale_price_ma_chart.map((value, key) => {
          for (let i in value.data) {
            let _obj = {
              value: value.data[i],
              year: value.date.toString() + "月",
            };
            if (i == "sale_price_1") {
              _obj.name = "20元以下";
              _arr1.push(_obj);
            } else if (i == "sale_price_2") {
              _obj.name = "20~50元";
              _arr2.push(_obj);
            } else if (i == "sale_price_3") {
              _obj.name = "50~100元";
              _arr3.push(_obj);
            } else if (i == "sale_price_4") {
              _obj.name = "100~200元";
              _arr4.push(_obj);
            } else if (i == "sale_price_5") {
              _obj.name = "200元以上";
              _arr5.push(_obj);
            }
          }
        });
        this.areaData5 = [..._arr1, ..._arr2, ..._arr3, ..._arr4, ..._arr5];
        // 平均月销品种数
        this.ringData6 = [];
        for (let i in res.data.sale_price_count) {
          let _obj = {
            value: res.data.sale_price_count[i],
          };
          if (i == "sale_price_1") {
            _obj.name = "20元以下";
          } else if (i == "sale_price_2") {
            _obj.name = "20~50元";
          } else if (i == "sale_price_3") {
            _obj.name = "50~100元";
          } else if (i == "sale_price_4") {
            _obj.name = "100~200元";
          } else if (i == "sale_price_5") {
            _obj.name = "200元以上";
          }
          this.ringData6.push(_obj);
        }
        this.industryRingData6 = [];
        // 行业品种数
        for (let i in res.data.sale_price_industry_count) {
          let _obj = {
            value: res.data.sale_price_industry_count[i],
          };
          if (i == "sale_price_1") {
            _obj.name = "20元以下";
          } else if (i == "sale_price_2") {
            _obj.name = "20~50元";
          } else if (i == "sale_price_3") {
            _obj.name = "50~100元";
          } else if (i == "sale_price_4") {
            _obj.name = "100~200元";
          } else if (i == "sale_price_5") {
            _obj.name = "200元以上";
          }
          this.industryRingData6.push(_obj);
        }
        // 品种数结构波动
        this.areaData6 = [];
        let _garr1 = [],
          _garr2 = [],
          _garr3 = [],
          _garr4 = [],
          _garr5 = [];
        res.data.sale_price_count_chart.map((value, key) => {
          for (let i in value.data) {
            let _obj = {
              value: value.data[i],
              year: value.date.toString() + "月",
            };
            if (i == "sale_price_1") {
              _obj.name = "20元以下";
              _garr1.push(_obj);
            } else if (i == "sale_price_2") {
              _obj.name = "20~50元";
              _garr2.push(_obj);
            } else if (i == "sale_price_3") {
              _obj.name = "50~100元";
              _garr3.push(_obj);
            } else if (i == "sale_price_4") {
              _obj.name = "100~200元";
              _garr4.push(_obj);
            } else if (i == "sale_price_5") {
              _obj.name = "200元以上";
              _garr5.push(_obj);
            }
          }
        });
        this.areaData6 = [
          ..._garr1,
          ..._garr2,
          ..._garr3,
          ..._garr4,
          ..._garr5,
        ];
        this.$nextTick(() => {
          if(this.ringChange5){
            this.ringChange5.destroy();
            this.initRing(5);
          }else{
            this.initRing(5);
          }
          if(this.ringChange6){
            this.ringChange6.destroy();
            this.initRing(6);
          }else{
            this.initRing(6);
          }
          if(this.areaChange5){
            this.areaChange5.destroy();
            this.initArea(5);
          }else{
            this.initArea(5);
          }
          if(this.areaChange6){
            this.areaChange6.destroy();
            this.initArea(6);
          }else{
            this.initArea(6);
          }
          this.isLoading = false;
        });
      } else {
        if (res.code == 1009) {
          this.pagePower = false;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    // 获取初级分类列表
    async getFirstCategory() {
      var tStamp = this.$getTimeStamp();
      let data = {
        supplier_id: this.$refs.head.publishInfo.supplier_id,
        // floor: 2,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await COMMON_PUBLISHERCATEGORY(data);
      if (res.code == 0) {
        this.categoryList = [];
        let _data = {
          category_id: 0,
          name: "所有类目",
          pid: 0,
        };
        this.categoryList.push(_data);
        res.data.map((value, key) => {
          this.categoryList.push(value);
        });
      } else {
        this.$refs.head.globalTip(1, res.message, res.code);
      }
    },
    yearChange(value) {
      this.isLoading = true;
      this.chooseYear = value;
      this.getData();
      this.getSalelevelData();
      this.getSaleageData();
      this.getSalepriceData();
    },
    // 选择分类
    selectCategory(value) {
      this.isLoading = true;
      this.getData();
      this.getSalelevelData();
      this.getSaleageData();
      this.getSalepriceData();
    },
    closeDom() {},
    // 饼图
    initRing(index) {
      let data, chart;
      // 可以通过调整这个数值控制分割空白处的间距，0-1 之间的数值
      const sliceNumber = 0.003;
      // 自定义 other 的图形，增加两条线
      registerShape("interval", "slice-shape", {
        draw(cfg, container) {
          const points = cfg.points;
          let path = [];
          path.push(["M", points[0].x, points[0].y]);
          path.push(["L", points[1].x, points[1].y - sliceNumber]);
          path.push(["L", points[2].x, points[2].y - sliceNumber]);
          path.push(["L", points[3].x, points[3].y]);
          path.push("Z");
          path = this.parsePath(path);
          return container.addShape("path", {
            attrs: {
              fill: cfg.color,
              path,
            },
          });
        },
      });
      if (index == 1) {
        data = this.ringData1;
        this.ringChange1 = new Chart({
          container: "ring1",
          autoFit: true,
          height: 160,
        });
        chart = this.ringChange1;
      } else if (index == 2) {
        data = this.ringData2;
        this.ringChange2 = new Chart({
          container: "ring2",
          autoFit: true,
          height: 160,
        });
        chart = this.ringChange2;
      } else if (index == 3) {
        data = this.ringData3;
        this.ringChange3 = new Chart({
          container: "ring3",
          autoFit: true,
          height: 160,
        });
        chart = this.ringChange3;
      } else if (index == 4) {
        data = this.ringData4;
        this.ringChange4 = new Chart({
          container: "ring4",
          autoFit: true,
          height: 160,
        });
        chart = this.ringChange4;
      } else if (index == 5) {
        data = this.ringData5;
        this.ringChange5 = new Chart({
          container: "ring5",
          autoFit: true,
          height: 160,
        });
        chart = this.ringChange5;
      } else if (index == 6) {
        data = this.ringData6;
        this.ringChange6 = new Chart({
          container: "ring6",
          autoFit: true,
          height: 160,
        });
        chart = this.ringChange6;
      }
      chart.data(data);
      chart.coordinate("theta", {
        radius: 0.75,
        innerRadius: 0.7,
      });
      chart.tooltip({
        showMarkers: false,
      });
      chart.legend({
        position: "right",
        offsetX: -20,
      });
      chart
        .interval()
        .adjust("stack")
        .position("value")
        .color("name", (name) => {
          if (name == data[0].name) {
            if (index == 1 || index == 2) {
              return "#F8121D";
            } else if (index == 3 || index == 4) {
              return "#7BE07C";
            } else if (index == 5 || index == 6) {
              return "#4A99E8";
            }
          } else if (name == data[1].name) {
            if (index == 1 || index == 2) {
              return "#FC6F28";
            } else if (index == 3 || index == 4) {
              return "#38AA20";
            } else if (index == 5 || index == 6) {
              return "#656BC6";
            }
          } else if (name == data[2].name) {
            if (index == 1 || index == 2) {
              return "#FFCC33";
            } else if (index == 3 || index == 4) {
              return "#FFD147";
            } else if (index == 5 || index == 6) {
              return "#803DA4";
            }
          } else if (name == data[3].name) {
            if (index == 1 || index == 2) {
              return "#EDD78D";
            } else if (index == 3 || index == 4) {
              return "#FEA038";
            } else if (index == 5 || index == 6) {
              return "#FF6700";
            }
          } else if (name == data[4].name) {
            if (index == 1 || index == 2) {
              return "#DAE2E7";
            } else if (index == 3 || index == 4) {
              return "#FC6F28";
            } else if (index == 5 || index == 6) {
              return "#C05253";
            }
          }
        })
        .shape("slice-shape")
        .tooltip("name*value",(name,value)=>{
          return {
            title:"本社平均",
            name:name,
            value:value + '%',
          }
        });
      chart.interaction("element-active");
      chart.render();
    },
    // 面积图
    initArea(index) {
      let data, _dv, chart, _color;
      if (index == 1) {
        data = this.areaData1;
        this.areaChange1 = new Chart({
          container: "area1",
          autoFit: true,
          height: 160,
        });
        chart = this.areaChange1;
        _color = ["#F7676F", "#FC732F", "#FFCF43", "#F4E2A7", "#E2E7E9"];
      } else if (index == 2) {
        data = this.areaData2;
        this.areaChange2 = new Chart({
          container: "area2",
          autoFit: true,
          height: 160,
        });
        chart = this.areaChange2;
        _color = ["#F7676F", "#FC732F", "#FFCF43", "#F4E2A7", "#E2E7E9"];
      } else if (index == 3) {
        data = this.areaData3;
        this.areaChange3 = new Chart({
          container: "area3",
          autoFit: true,
          height: 160,
        });
        chart = this.areaChange3;
        _color = ["#7BE07C","#38AA20","#FFD147","#FEA038","#FC6F28"];
      } else if (index == 4) {
        data = this.areaData4;
        this.areaChange4 = new Chart({
          container: "area4",
          autoFit: true,
          height: 160,
        });
        chart = this.areaChange4;
        _color = ["#7BE07C","#38AA20","#FFD147","#FEA038","#FC6F28"];
      } else if (index == 5) {
        data = this.areaData5;
        this.areaChange5 = new Chart({
          container: "area5",
          autoFit: true,
          height: 160,
        });
        chart = this.areaChange5;
        _color = ["#A4CBF1", "#B2B5E1", "#BD9FCE", "#FDB380", "#E8C8C8"];
      } else if (index == 6) {
        data = this.areaData6;
        this.areaChange6 = new Chart({
          container: "area6",
          autoFit: true,
          height: 160,
        });
        chart = this.areaChange6;
        _color = ["#A4CBF1", "#B2B5E1", "#BD9FCE", "#FDB380", "#E8C8C8"];
      }
      // console.log(index,data)
      chart.data(data);
      chart.scale({
        value: {
          nice: true,
          max: 100,
        },
        year: {
          range: [0, 1],
        },
      });
      chart.axis("value", {
        label: {
          formatter: function (value) {
            return value + "%";
          },
        },
      });
      chart.legend(false);
      chart.tooltip({
        showCrosshairs: true, // 展示 Tooltip 辅助线
        shared: true,
        showMarkers: true,
        itemTpl: `<div style="margin-bottom: 10px;list-style:none;">
                    <span style="background-color:{color};" class="g2-tooltip-marker"></span>
                    {name}: {value}%
                    </div>`,
      });
      chart.area().adjust("stack").position("year*value").color("name", _color);
      chart.line().adjust("stack").position("year*value").color("name", _color);

      chart.interaction("element-highlight");
      chart.render();
    },
    publisherChange() {
      this.isLoading = true;
      this.chooseCategory = [0];
      this.chooseYear = this.yearList[0];
      this.getFirstCategory();
      this.getData();
      this.getSalelevelData();
      this.getSaleageData();
      this.getSalepriceData();
    },
  },
};
</script>